<template>
  <div>
    <el-dialog v-model="dialogVisible" width="30%" title="执行SQL" :before-close="handleClose">
      <!--<span> {{ slqData }}</span>-->
      <codemirror
              v-model="slqData"
              :placeholder="placeholder"
              :style="editorStyle"
              :autofocus="true"
              :indent-with-tab="true"
              :tab-size="2"
              :extensions="extensions"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">执行SQL</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script>
    import { Codemirror } from 'vue-codemirror'
    import { sql } from '@codemirror/lang-sql'
    import { oneDark } from '@codemirror/theme-one-dark'
    import sqlFormatter from 'sql-formatter'
export default {
  components: {
    Codemirror,
  },
  data() {
    return {
      dialogVisible: false, // 控制弹窗的显示与隐藏
      slqData: '',
      // 配置
      extensions: [sql(), oneDark],
      editor:null,
    }
  },
  computed: {
    value_: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('update:value', val)
      },
    },

    editorStyle() {
      return { width: '100%', height: '300px', 'font-size': '16px' }
    },
  },
  methods: {
    // 格式化
    handleFormat() {
      let sql = sqlFormatter.format(this.slqData, { syntax: 'sql' });
      // this.editor.setValue(sql);  // 设置sql语句
      this.slqData=sql;  //获取sql语句
    },
    openDialog(val, tb) {
      this.dialogVisible = true // 打开弹窗
      this.slqData = val
      this.handleFormat();
    },
    handleClose(done) {
      // 在这里可以添加一些关闭弹窗前的逻辑，如果需要的话
      // done(); // 调用 done() 表示关闭弹窗
      this.dialogVisible = false // 关闭
    },
    handleConfirm() {
      // 在这里可以添加点击确认按钮后的逻辑
      this.dialogVisible = false // 关闭弹窗
      this.$emit('exeSqlAct')
      // this.$message({
      //   type: "info",
      //   message: "功能暂未开放",
      // });
    }
  }
}
</script>
  
  <style scoped>
.custom-dialog-header {
}
/* 在这里可以添加弹窗样式 */
</style>
  